<template>
  <div class="main">
    <div class="title" style="font-weight:600;font-size:20px;margin-bottom:20px">
      MQTT测试工具
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="设备管理" name="first">
        <Search
          :tableSearch="tableSearch"
          @handleSearch="handleSearch"
        ></Search>
        <div class="operation">
          <el-button
            type="danger"
            size="mini"
            plain
            icon="el-icon-plus"
            @click="showemq"
            >新增设备</el-button
          >
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-connection"
            @click="mqttshow"
            >MQTT连接配置</el-button
          >
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-open"
            @click="openheart"
            >开启心跳</el-button
          >
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-turn-off"
            @click="closeheart"
            >关闭心跳</el-button
          >
        </div>
        <el-table
          ref="emqtable"
          style="width: 100%"
          :data="emqtable"
          :header-cell-style="{ 'text-align': 'center', color: '#000000' }"
          :cell-style="{ 'text-align': 'center' }"
          @selection-change="emqtabelchange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号"> </el-table-column>

          <el-table-column prop="code" label="供应商编码" min-width="170">
          </el-table-column>
          <el-table-column prop="devId" label="设备ID" min-width="170">
          </el-table-column>

          <el-table-column prop="devType" label="设备类型" min-width="170">
          </el-table-column>
          <el-table-column prop="version" label="版本号" min-width="170">
          </el-table-column>
          <el-table-column prop="mac" label="设备MAC" min-width="170">
          </el-table-column>
          <el-table-column prop="ip" label="设备IP" min-width="170">
          </el-table-column>

          <el-table-column prop="online" label="设备状态" min-width="170">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.online == true ? 'success' : 'danger'"
                plain
                >{{ scope.row.online == true ? "在线" : "离线" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="emqchange(scope.row)">
                修改
              </el-button>
              <el-button type="text" size="small" @click="emqnet(scope.row)">
                联网鉴权
              </el-button>
              <el-button type="text" size="small" @click="emqdel(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="float: right"
          layout="prev, pager, next"
          :page-size="page.size"
          :current-page="page.page"
          :total="total"
          @current-change="changePage"
        />

        <!-- 新增设备弹窗 -->
        <el-dialog title="新增设备" :visible.sync="emqopen" width="700px">
          <el-form ref="form" label-width="100px" :model="emqform">
            <el-row>
              <el-col :span="12" v-if="!this.emqform.id">
                <el-form-item label="厂商名称">
                  <el-input
                    placeholder="请输入厂商名称"
                    v-model="emqform.codeName"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="供应商编码">
                  <el-input
                    placeholder="请输入供应商编码"
                    v-model="emqform.code"
                    :disabled="this.emqform.id ? true : false"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备ID">
                  <el-input
                    placeholder="固定3位前缀码+大写字母数字组成"
                    v-model="emqform.devId"
                    :disabled="this.emqform.id ? true : false"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备类型">
                  <el-input
                    placeholder="请输入设备类型"
                    v-model="emqform.devType"
                  />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="设备编号" v-model="emqform.id">
                  <el-input placeholder="请输入设备编号" />
                </el-form-item>
              </el-col> -->
              <el-col :span="12" v-if="!this.emqform.id">
                <el-form-item label="设备名称">
                  <el-input
                    placeholder="请输入设备名称"
                    v-model="emqform.devName"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="版本号">
                  <el-input
                    placeholder="请输入设备版本号"
                    v-model="emqform.version"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备MAC">
                  <el-input
                    placeholder="请输入设备MAC地址"
                    v-model="emqform.mac"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备IP">
                  <el-input placeholder="请输入设备IP" v-model="emqform.ip" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="设备网关">
                  <el-input
                    placeholder="请输入设备网关"
                    v-model="emqform.gateway"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="子网掩码">
                  <el-input
                    placeholder="请输入子网掩码"
                    v-model="emqform.mark"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="emqok">确 定</el-button>
            <el-button @click="emqcel">取 消</el-button>
          </div>
        </el-dialog>
        <!-- MQTT连接配置 -->
        <el-dialog title="MQTT连接配置" :visible.sync="MQTTopen" width="700px">
          <el-form ref="form" label-width="100px" :model="mqttform">
            <el-row>
              <el-col :span="12">
                <el-form-item label="主机名">
                  <el-input
                    placeholder="请输入主机名"
                    v-model="mqttform.hostUrl"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户名">
                  <el-input
                    placeholder="请输入用户名"
                    v-model="mqttform.username"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密码">
                  <el-input
                    placeholder="请输入密码"
                    v-model="mqttform.password"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户端ID">
                  <el-input
                    placeholder="请输入客户端ID"
                    v-model="mqttform.clientId"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="mqttok">确 定</el-button>
            <el-button @click="mqttcel">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog
          title="联网鉴权"
          :visible.sync="onlineAuthentic"
          width="1000px"
        >
          <el-form ref="formTable" label-width="100px" :model="emqform">
            <el-table
              :data="tableData"
              height="650"
              border
              style="width: 100%"
              :header-cell-style="{ 'text-align': 'center', color: '#000000' }"
              :cell-style="{ 'text-align': 'center' }"
              :highlight-current-row="true"
              @cell-mouse-leave="changeData"
            >
              <el-table-column prop="type" label="类型" width="130">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.type"
                    placeholder="请选择"
                    :disabled="scope.row.id ? true : false"
                    @change="aa"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="code" label="卡号/Id" width="180">
                <template slot-scope="scope">
                  <el-input
                   :disabled="scope.row.id ? true : false"
                    v-model="scope.row.code"
                    placeholder="请输入内容"
                  ></el-input>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="data" label="内容" width="180">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.data"
                    placeholder="请输入内容"
                  ></el-input>
                </template>
              </el-table-column> -->
              <el-table-column prop="door" label="门区号">
                <template slot-scope="scope">
                  <el-input
                   :disabled="scope.row.id ? true : false"
                    v-model="scope.row.door"
                    placeholder="请输入内容"
                  ></el-input> </template
              ></el-table-column>

              <!-- <el-table-column fixed="right" label="操作" width="60">
                <template slot-scope="scope">
                  <el-button
                   :disabled="scope.row.id ? true : false"
                    type="text"
                    size="small"
                    style="color: red"
                    @click="delOnline(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column> -->
            </el-table>
            <div class="add" style="width: 100%">
              <el-button
                type="primary"
                style="margin-left: 420px"
                icon="el-icon-plus"
                @click="add"
                >添加</el-button
              >
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onlineSubmit">确 定</el-button>
            <el-button @click="onlineAuthentic = false">取 消</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="记录上报" name="second">
        <Search
          :tableSearch="tableSearch1"
          @handleSearch="handleSearch1"
        ></Search>
        <div class="operation">
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-plus"
            @click="logUp"
          >
            记录上报</el-button
          >
        </div>
        <el-table
          ref="emqtable"
          style="width: 100%"
          :data="tableData1"
          :header-cell-style="{ 'text-align': 'center', color: '#000000' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column type="index" label="序号"> </el-table-column>

          <el-table-column prop="code" label="供应商编号" min-width="170">
          </el-table-column>
          <el-table-column prop="devId" label="设备ID" min-width="170">
          </el-table-column>

          <el-table-column prop="recId" label="记录流水号" min-width="170">
          </el-table-column>
          <el-table-column prop="userId" label="人员ID" min-width="170">
          </el-table-column>
          <el-table-column prop="name" label="姓名" min-width="170">
          </el-table-column>
          <el-table-column prop="jobNo" label="工号" min-width="170">
          </el-table-column>
          <el-table-column prop="cardNo" label="卡号" min-width="170">
          </el-table-column>

          <el-table-column prop="validTime" label="校验时间" min-width="170">
          </el-table-column>
          <el-table-column prop="doorNo" label="门区号" min-width="170">
          </el-table-column>
          <el-table-column prop="picBase" label="考勤图片" min-width="170">
          </el-table-column>
          <el-table-column prop="auth" label="是否有权" min-width="170">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.auth == 1 ? 'success' : 'danger'"
                plain
                >{{ scope.row.auth == 1 ? "有权" : "无权" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="through" label="是否通过" min-width="170">
          </el-table-column>
          <el-table-column prop="createdTime" label="创建时间" min-width="170">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="logUpthis(scope.row)">
                上报该条记录
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="float: right"
          layout="prev, pager, next"
          :page-size="page1.size"
          :current-page="page1.page"
          :total="total1"
          @current-change="changePage1"
        />
        <!-- 弹窗 -->
        <el-dialog title="记录上报" :visible.sync="logUpdlode" width="1200px">
          <el-form ref="formTable" label-width="100px" :model="emqform">
            门禁设备唯一ID
            <el-select v-model="logDevId" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-table
              :data="tableData2"
              height="650"
              border
              style="width: 100%"
              :header-cell-style="{ 'text-align': 'center', color: '#000000' }"
              :cell-style="{ 'text-align': 'center' }"
              :highlight-current-row="true"
              @cell-mouse-leave="changeData"
            >
              <el-table-column prop="recIndex" label="记录索引" width="100">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.recIndex"
                    placeholder="记录索引"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="userId" label="人员ID" width="140">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.userId"
                    placeholder="人员ID"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="100">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.name"
                    placeholder="姓名"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="jobNo" label="工号" width="160">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.jobNo"
                    placeholder="工号"
                  ></el-input> </template
              ></el-table-column>
              <el-table-column prop="cardNo" label="卡号" width="180">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.cardNo"
                    placeholder="卡号"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="doorNo" label="门区号" width="100">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.doorNo"
                    placeholder="门区号"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="picsite" label="考勤图片" width="140">
                <template slot-scope="scope">
                  <el-upload
                    class="upload-demo"
                    action="#"
                    :http-request="
                      (file) => {
                        return upFile(file, scope.row);
                      }
                    "
                    multiple
                    :limit="1"
                    :file-list="scope.row.fileList"
                  >
                    <el-button size="mini" type="primary">上传图片</el-button>
                  </el-upload>
                </template>
              </el-table-column>
              <el-table-column prop="code" label="状态码">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.code"
                    placeholder="状态码"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="msg" label="额外信息" width="180">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.msg"
                    placeholder="额外信息"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="time" label="通行时间" width="160">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.time"
                    type="datetime"
                    placeholder="选择通行时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column prop="passType" label="权限类型" width="140">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.passType"
                    placeholder="请选择"
                    @change="aa"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="60">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    style="color: red"
                    @click="delOnline2(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="add" style="width: 100%">
              <el-button
                type="primary"
                style="margin-left: 540px"
                icon="el-icon-plus"
                @click="add2"
                >添加</el-button
              >
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onlineSubmit2">确 定</el-button>
            <el-button @click="logUpdlode = false">取 消</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="人员管理" name="third">
        <Search
          :tableSearch="tableSearch3"
          @handleSearch="handleSearch3"
        ></Search>

        <el-table
          style="width: 100%"
          :data="tableData3"
          :header-cell-style="{ 'text-align': 'center', color: '#000000' }"
          :cell-style="{ 'text-align': 'center' }"
          @selection-change="emqtabelchange3"
        >
          <el-table-column type="selection" width="55"> </el-table-column>

          <el-table-column prop="userId" label="人员ID" min-width="170">
          </el-table-column>
          <el-table-column prop="name" label="姓名" min-width="170">
          </el-table-column>

          <el-table-column prop="jobNo" label="工号" min-width="170">
          </el-table-column>
          <el-table-column prop="cardNo" label="卡号" min-width="170">
          </el-table-column>
          <el-table-column prop="sex" label="性别" min-width="170">
            <template slot-scope="scope">
              {{ scope.row.sex == 1 ? "男" : "女" }}
            </template>
          </el-table-column>
         
          <el-table-column prop="devId" label="设备ID" min-width="170">
          </el-table-column>
          <el-table-column prop="doorNo" label="门区号" min-width="170">
          </el-table-column>
          <el-table-column prop="password" label="个人密码" min-width="170">
          </el-table-column>

          <el-table-column prop="auth" label="是否有权" min-width="170">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.auth == 1 ? 'success' : 'danger'"
                plain
                >{{ scope.row.auth == 1 ? "是" : "否" }}</el-tag
              >
            </template>
          </el-table-column>
              <el-table-column prop="del" label="是否删除" min-width="170">
            <template slot-scope="scope">
             {{ scope.row.del == 1 ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column prop="validTime" label="有效期" min-width="170">
          </el-table-column>
          <el-table-column prop="picUrl" label="图片下载地址" min-width="170">
          </el-table-column>
          <!-- <el-table-column prop="ip" label="图片Base64" min-width="170">
          </el-table-column> -->
          <el-table-column prop="groupNo" label="群组号" min-width="170">
          </el-table-column>
          <el-table-column prop="special" label="特殊功能" min-width="170">
          </el-table-column>
          <el-table-column prop="cardType" label="卡类" min-width="170">
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="float: right"
          layout="prev, pager, next"
          :page-size="page3.size"
          :current-page="page3.page"
          :total="total"
          @current-change="changePage3"
        />
      </el-tab-pane>
      <!-- 弹窗 -->
      <el-dialog title="新增人员" :visible.sync="personDio" width="1200px">
        <el-form ref="formTable" label-width="100px" :model="emqform">
          门禁设备唯一ID
          <el-select v-model="logDevId" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-table
            :data="tableData2"
            height="650"
            border
            style="width: 100%"
            :header-cell-style="{ 'text-align': 'center', color: '#000000' }"
            :cell-style="{ 'text-align': 'center' }"
            :highlight-current-row="true"
            @cell-mouse-leave="changeData"
          >
            <el-table-column prop="recIndex" label="记录索引" width="100">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.recIndex"
                  placeholder="记录索引"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="userId" label="人员ID" width="140">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.userId"
                  placeholder="人员ID"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="100">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.name"
                  placeholder="姓名"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="jobNo" label="工号" width="160">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.jobNo"
                  placeholder="工号"
                ></el-input> </template
            ></el-table-column>
            <el-table-column prop="cardNo" label="卡号" width="180">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.cardNo"
                  placeholder="卡号"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="doorNo" label="门区号" width="100">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.doorNo"
                  placeholder="门区号"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="picsite" label="考勤图片" width="140">
              <template slot-scope="scope">
                <el-upload
                  class="upload-demo"
                  action="#"
                  :http-request="
                    (file) => {
                      return upFile(file, scope.row);
                    }
                  "
                  multiple
                  :limit="1"
                  :file-list="scope.row.fileList"
                >
                  <el-button size="mini" type="primary">上传图片</el-button>
                </el-upload>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="状态码">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.code"
                  placeholder="状态码"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="msg" label="额外信息" width="180">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.msg"
                  placeholder="额外信息"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="通行时间" width="160">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.time"
                  type="datetime"
                  placeholder="选择通行时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="passType" label="权限类型" width="140">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.passType"
                  placeholder="请选择"
                  @change="aa"
                >
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  style="color: red"
                  @click="delOnline2(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="add" style="width: 100%">
            <el-button
              type="primary"
              style="margin-left: 540px"
              icon="el-icon-plus"
              @click="add2"
              >添加</el-button
            >
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="onlineSubmit2">确 定</el-button>
          <el-button @click="logUpdlode = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>
import Search from "@/components/search.vue";
import {
  addDevapi,
  queryDevapi,
  mqttapi,
  addHeartBeatapi,
  delHeartBeatapi,
  getPerson,
  accessPush,
  del,
  recList,
  uploadInfo,
  upload,
  getDownPerson,
} from "@/utils/api";
export default {
  components: {
    Search,
  },
  data() {
    return {
      personDio: false,
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      options: [
        {
          label: "卡号",
          value: 0,
        },
        {
          label: "人员Id",
          value: 1,
        },
      ],
      options1: [
        {
          label: "联网鉴权",
          value: 0,
        },
        {
          label: "本机鉴权",
          value: 1,
        },
        {
          label: "实时通行",
          value: 2,
        },
      ],
      options2: [],
      onlineAuthentic: false,
      activeName: "first",
      tableSearch: [
        {
          label: "设备类型",
          value: "devType",
          type: "text",
        },

        {
          label: "供应商编号",
          value: "code",
          type: "text",
        },
        {
          label: "设备MAC",
          value: "mac",
          type: "text",
        },
      ],
      tableSearch1: [
        {
          label: "设备ID",
          value: "devId",
          type: "text",
        },

        // {
        //   label: "时间",
        //   value: "code",
        //   type: "picker",
        //   children: [],
        // },
      ],
      tableSearch3: [
      
        {
          label: "人员ID",
          value: "userId",
          type: "text",
        },
        {
          label: "设备ID",
          value: "devId",
          type: "text",
        },
        {
          label: "工号",
          value: "jobNo",
          type: "text",
        },

        {
          label: "姓名",
          value: "name",
          type: "text",
        },

        {
          label: "是否有权",
          value: "auth",
          type: "select",
          children: [
            {
              label: "是",
              value: 1,
            },
            {
              label: "否",
              value: 0,
            },
         
          ],
        },
      ],
      emqtable: [], //设备列表
      emqopen: false, //设备管理弹窗
      devId: "",
      emqform: {
        code: "",
        devId: "",
        devType: "",
        gateway: "",
        ip: "",
        mac: "",
        mark: "",
        version: "",
        devName: "",
        codeName: "",
      },
      emqtableok: [],
      // 分页
      page: {
        page: 1,
        size: 10,
      },
      total: 0,
      // 分页
      page1: {
        page: 1,
        size: 10,
      },
      total1: 0,
      // 分页
      page3: {
        page: 1,
        size: 10,
      },
      total3: 0,
      mqttform: {
        clientId: "",
        username: "",
        password: "",
        hostUrl: "",
      },
      newData: [],
      MQTTopen: false,
      logUpdlode: false,
      fileList: [],
      imgBaseUrl: "",
      logDevId: "",
    };
  },
  created() {},
  // watch:{

  // },
  mounted() {
    this.queryDev();
    this.getUpList();
    this.getPersonList();
    // this.emqnet();
  },
  methods: {
    getPersonList() {
      getDownPerson(this.page3).then((res) => {
        if (res.code === 2000) {
          this.tableData3 = res.data.list;
          this.total3 = res.data.total;
          this.page3.page = res.data.pageNum;
        }
      });
    },
    upFile(file, row) {
      this.fileToBase64(file.file, row);
    },
    // 获取列表
    getUpList() {
      recList(this.page1).then((res) => {
        if (res.code === 2000) {
          this.tableData1 = res.data.list;
          this.total1 = res.data.total;
          this.page1.page = res.data.pageNum;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handlePreview(file) {
      console.log(file);
    },
    fileToBase64(file, row) {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        console.log(reader.result);
        this.imgBaseUrl = reader.result;
        row.picsite = this.imgBaseUrl;
        // callback(reader.result)
      };
      // 转换失败
      reader.onerror = function () {
        console.log("error");
      };
    },
    logUp() {
      this.logUpdlode = true;
      this.logDevId = this.options2[0].value;
    },
    logUpthis(row) {
      upload([row.id]).then((res) => {
        if (res.code === 2000) {
          this.$message.success("上传成功");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //页签切换事件
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //接受事件
    handleSearch(val) {
      const data = { condition: JSON.stringify(val) };
      queryDevapi(data).then((res) => {
        console.log(res);
        this.emqtable = res.data.list;
        this.total = res.data.total;
        this.page.page = res.data.pageNum;
      });
    },
    handleSearch1(val) {
      const data = { condition: JSON.stringify(val) };
      recList(data).then((res) => {
        this.tableData1 = res.data.list;
        this.total1 = res.data.total;
        this.page1.page = res.data.pageNum;
      });
    },
    handleSearch3(val) {
      const data = { condition: JSON.stringify(val) };
      getDownPerson(data).then((res) => {

        this.tableData3 = res.data.list;
        this.total3 = res.data.total;
        this.page3.page = res.data.pageNum;
      });
    },
    // 获取设备列表
    queryDev() {
      queryDevapi(this.page).then((res) => {
        this.emqtable = res.data.list;
        this.total = res.data.total;
        this.page.page = res.data.pageNum;
        res.data.list.forEach((element) => {
          this.options2.push({
            label: element.devId,
            value: element.id,
          });
        });
      });
    },
    //新增设备
    showemq() {
      this.emqform = {
        code: "",
        devId: "",
        devType: "",
        gateway: "",
        ip: "",
        mac: "",
        mark: "",
        version: "",
        devName: "",
        codeName: "",
      };
      this.emqopen = true;
    },
    //新增设备确定
    emqok() {
      if (this.emqform.id) {
        addDevapi(this.emqform).then((res) => {
          console.log(res);
          if (res.code == 2000) {
            this.$message.success("操作成功");
            this.emqopen = false;
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        addDevapi(this.emqform).then((res) => {
          console.log(res);
          if (res.code == 2000) {
            this.$message.success("操作成功");
            this.emqopen = false;
          } else {
            this.$message.error(res.message);
          }
        });
      }
      // console.log(this.emqform);
    },
    delOnline(row) {
      // 删除tabledata中选中的数据

      this.tableData.splice(this.tableData.indexOf(row), 1);
    },
    delOnline2(row) {
      // 删除tabledata中选中的数据

      this.tableData2.splice(this.tableData2.indexOf(row), 1);
    },
    // 联网鉴权
    onlineSubmit() {
      accessPush(this.newData).then((res) => {
        if (res.code === 2000) {
          this.$message.success("推送成功！");
          this.onlineAuthentic = false
        } else {
          this.$message.error(res.message);
        }
      });
    },
    onlineSubmit2() {
      const newData = {
        devId: this.logDevId,
        recordList: this.tableData2,
      };
      uploadInfo(newData).then((res) => {
        if (res.code === 2000) {
          this.$message.success("上报成功！");
          this.logUpdlode = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    onlineSubmit3() {},
    aa(e) {
      this.newData[0].type = e;
    },
    changeData(e) {
      const data = [
        {
          devId: this.devId,
          door: parseInt(e.door),
          type: e.type,
          code: e.code,
          mediumId: e.id || "",
        },
      ];
      this.newData = data;
    },
    add() {
      // 给tableData列表添加一行信息
      this.tableData.push({
        // id: this.tableData.length + 1,
        devId: this.devId,
        door: 0,
        type: 0,
        code: "",
      });
    },
    add2() {
      // 给tableData1列表添加一行信息
      this.tableData2.push({
        // id: this.tableData.length + 1,
        userId: "",
        name: "",
        jobNo: "",
        cardNo: "",
        doorNo: "",
        picsite: "",
        code: "",
        msg: "",
        time: "",
        passType: 0,
        recIndex: parseInt(this.tableData2.length),
      });
    },
    //新增设备取消
    emqcel() {
      this.emqopen = false;
    },
    //设备表格改变
    emqtabelchange(val) {
      // console.log(val);
      this.emqtableok = val;
    },
    emqtabelchange3(val) {
      console.log(val);
    },
    //开启心跳
    openheart() {
      let tableok = [];
      for (let i = 0; i < this.emqtableok.length; i++) {
        tableok.push(this.emqtableok[i].id);
      }
      console.log(tableok);
      addHeartBeatapi(tableok).then((res) => {
        // console.log(res)
        if (res.code == 2000) {
          this.$message.success("操作成功");
          this.$refs.emqtable.clearSelection();
        } else {
          this.$message.error(res.essage);
          this.$refs.emqtable.clearSelection();
        }
      });
    },
    //关闭心跳
    closeheart() {
      let tableclose = [];
      for (let i = 0; i < this.emqtableok.length; i++) {
        tableclose.push(this.emqtableok[i].id);
      }
      console.log(tableclose);
      delHeartBeatapi(tableclose).then((res) => {
        // console.log(res)
        if (res.code == 2000) {
          this.$message.success("操作成功");
          this.$refs.emqtable.clearSelection();
        } else {
          this.$message.error(res.essage);
          this.$refs.emqtable.clearSelection();
        }
      });
    },
    //设备修改
    emqchange(row) {
      this.emqopen = true;
      this.emqform = row;
    },
    //设备删除
    emqdel(row) {
      del({ id: row.id }).then((res) => {
        if (res.code === 2000) {
          this.$message.success("删除成功！");
          this.queryDev();
        } else {
          this.$message.error(res.essage);
        }
      });
    },
    //设备联网鉴权
    emqnet(row) {
      this.tableData=[]
      this.devId = row.id;

      // getPerson({ devId: row.id }).then((res) => {
      //   if (res.code === 2000) {
      //     this.tableData = res.data.list;
      //   } else {
      //     this.$message.error(res.essage);
      //   }
      // });
      this.onlineAuthentic = true;
    },
    // 分页获取列表
    changePage(newpage) {
      this.page.page = newpage;
      this.queryDev();
    },
    changePage1(newpage) {
      this.page1.page = newpage;
      this.getUpList();
    },
    changePage3(newpage) {
      this.page3.page = newpage;
      this.getPersonList();
    },
    // mqtt连接
    mqttshow() {
      this.MQTTopen = true;
    },
    //mqtt弹窗确认
    mqttok() {
      mqttapi(this.mqttform).then((res) => {
        // console.log(res);
        if (res.code == 2000) {
          this.$message.success("操作成功");
          this.MQTTopen = false;
        } else {
          this.$message.error(res.essage);
        }
      });
    },
    //mqtt弹窗取消
    mqttcel() {
      this.MQTTopen = false;
    },
  },
};
</script>
<style lang="less">
.main {
  padding: 20px;
  .operation {
    margin-left: 20px;
    display: flex;
    position: relative;
  }
}
</style>
